<template>
  <div class="leftMod">
    <div class="one">
      <stitle :bg="bg" text="当日可燃气体监测数据" :type="0" />
      <eletable :tabledata="comgasdata" :tablebg="tablebg" />
    </div>
    <div class="two">
      <stitle :bg="bg" text="当日消防设施监测数据" :type="0" />
      <eletable :tabledata="firedata" :tablebg="tablebg" />
    </div>
    <div class="three">
      <stitle :bg="bg" text="当日可燃气体监测数据" :type="0" />
      <eletable :tabledata="wasteGasdata" :tablebg="tablebg" />
    </div>
    <div class="four">
      <stitle :bg="bg" text="当日废气监测数据" :type="0" />
      <eletable :tabledata="wasteWaterdata" :tablebg="tablebg" />
    </div>
  </div>
</template>
<script>
import stitle from "@/components/common/stitle";
import eletable from "@/components/common/eletable";
export default {
  name: "envleft",
  components: {
    stitle,
    eletable,
  },
  data() {
    return {
      // 标题
      bg: require("@/assets/images/DispatchCommand/stitle.png"),
      //图标定位
      tablebg: require("@/assets/images/envMon/palce.png"),
      //可燃气体
      comgasdata: [
        {
          name: "气体",
          value: 89,
          warning: "是",
          frequency: "24次/天",
        },
        {
          name: "气体",
          value: 43,
          warning: "否",
          frequency: "24次/天",
        },
        {
          name: "气体",
          value: 89,
          warning: "否",
          frequency: "24次/天",
        },
        {
          name: "气体",
          value: 43,
          warning: "否",
          frequency: "24次/天",
        },
        {
          name: "气体",
          value: 89,
          warning: "否",
          frequency: "24次/天",
        },
        {
          name: "气体",
          value: 43,
          warning: "否",
          frequency: "24次/天",
        },
        {
          name: "气体",
          value: 89,
          warning: "否",
          frequency: "24次/天",
        },
        {
          name: "气体",
          value: 43,
          warning: "否",
          frequency: "24次/天",
        },
      ],
      firedata: [
        {
          name: "消防监测点一",
          value: 89,
          warning: "是",
          frequency: "24次/天",
        },
        {
          name: "消防监测点二",
          value: 43,
          warning: "否",
          frequency: "24次/天",
        },
        {
          name: "消防监测点三",
          value: 89,
          warning: "否",
          frequency: "24次/天",
        },
        {
          name: "消防监测点四",
          value: 43,
          warning: "否",
          frequency: "24次/天",
        },
      ],
      wasteGasdata: [
        {
          name: "废气监测点一",
          value: 89,
          warning: "否",
          frequency: "24次/天",
        },
        {
          name: "废气监测点二",
          value: 43,
          warning: "否",
          frequency: "24次/天",
        },
        {
          name: "废气监测点三",
          value: 89,
          warning: "否",
          frequency: "24次/天",
        },
        {
          name: "废气监测点四",
          value: 43,
          warning: "否",
          frequency: "24次/天",
        },
      ],
      wasteWaterdata: [
        {
          name: "废水监测点一",
          value: 89,
          warning: "否",
          frequency: "24次/天",
        },
        {
          name: "废水监测点二",
          value: 43,
          warning: "否",
          frequency: "24次/天",
        },
        {
          name: "废水监测点三",
          value: 89,
          warning: "否",
          frequency: "24次/天",
        },
        {
          name: "废水监测点四",
          value: 43,
          warning: "否",
          frequency: "24次/天",
        },
      ],
    };
  },
};
</script>
<style scoped>
.leftMod {
  width: 375px;
  height: 930px;
  padding-left: 60px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  /* 字体样式 */
  font-size: 13px;
}
.one,
.two,
.three,
.four {
  width: 100%;
  height: 220px;
}
</style>